<template>
  <view class="container">
    <view class="btnBox">
      <view class="xBox" @click="$noMultipleClicks(onClick, 'formSend')">
        <view class="cn">洗衣</view>
        <view class="line" />
        <view class="en">LAUNDRY</view>
        <view class="line" />
        <image class="img" mode="widthFix" src="/static/image/img_cloth0.png" />
      </view>
      <view class="qBox" @click="$noMultipleClicks(onClick, 'formReceive')">
        <view class="cn">取衣</view>
        <view class="line" />
        <view class="en">TAKE CLOTHES</view>
        <view class="line" />
        <image class="img" mode="widthFix" src="/static/image/img_cloth1.png" />
      </view>

      <view class="aBox" @click="onRegister('formRegister')">
        <view class="l">
          <view class="cn">人员登记</view>
          <view class="en">Personnel registration</view>
        </view>
        <view class="r">
          <uni-icons type="contact-filled" color="#fff"></uni-icons>
        </view>
      </view>

      <template v-if="type === 'debug'">
        <button class="btn" type="primary" @click="onManager">人脸库</button>
        <button class="btn" type="primary" @click="onStartSync">
          定时同步开启
        </button>
        <button class="btn" type="primary" @click="onSetting">设 置</button>
      </template>
    </view>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        mode="input"
        :title="type === 'formRegister' ? '输入密码' : '输入编号'"
        placeholder="请输入"
        :before-close="true"
        @close="closeDialog"
        @confirm="onConfirm"
      >
        <uni-easyinput
          type="password"
          v-model="password"
          placeholder="请输入"
        />
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import _ from 'lodash';
import { netCheckPwd } from '@/api/laundry';
export default {
  components: {},
  data() {
    return {
      type: '',
      // 重复点击，使用noMultipleClicks方法时，需要在当前页面创建此变量
      noClick: true,
      password: '',
    };
  },
  onLoad(query) {
    // 人脸监听函数
    window.faceFindCallBack = (id, name) => {
      this.onFaceFindCallBack(id, name);
    };
    // if (uni.getSystemInfoSync().platform === 'android') {
    //   console.log('window', uni.getSystemInfoSync());
    // }
  },
  onHide() {},
  methods: {
    // APP
    onManager() {
      if (window.androidSDK && androidSDK) androidSDK.openFaceManager();
    },
    onSetting() {
      if (window.androidSDK && androidSDK) androidSDK.openSetting();
    },
    onStartSync() {
      if (window.androidSDK && androidSDK) androidSDK.startSync();
    },
    // 送、取
    onClick(n) {
      this.type = n;
      if (window.androidSDK && androidSDK) {
        androidSDK.openFaceFindView();
      } else {
        this.$refs.inputDialog.open();
      }
    },
    onFaceFindCallBack(id, name) {
      uni.showToast({
        icon: 'loading',
        title: '跳转中...',
      });
      // url参数
      let obj = {
        clothCode: id,
        personnelName: name,
      };
      let str = this.$util.jsonToUrlParam(obj);
      this.onLocation(`/pages/laundry/${this.type}?${str}`);
    },
    // 登记相关
    onRegister(n) {
      this.type = n;
      this.$refs.inputDialog.open();
    },
    onConfirm(v) {
      if (v === 'debug') {
        this.type = v;
        this.$refs.inputDialog.close();
        return;
      }
      if (!v && !this.password) {
        uni.showToast({
          icon: 'none',
          title: '请输入内容',
        });
        return;
      }
      if (this.type === 'formRegister') {
        netCheckPwd({
          password: v || this.password,
        }).then((res) => {
          if (res.code == 200) {
            this.$refs.inputDialog.close();
            this.onLocation('/pages/laundry/select');
          }
        });
      } else {
        this.$refs.inputDialog.close();
        this.onLocation(
          `/pages/laundry/${this.type}?clothCode=${v || this.password}`
        );
      }
      this.password = '';
    },
    // 跳转页面
    onLocation(url) {
      if (!url) return;
      uni.navigateTo({
        url,
        complete: () => {
          uni.hideToast();
        },
      });
    },
    closeDialog() {
      this.password = '';
      this.$refs.inputDialog.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-bottom) - 60rpx);
  padding-top: calc(var(--window-top));
  padding-bottom: calc(var(--window-bottom) + 60rpx);
  background: linear-gradient(180deg, #d7e4fd 0%, #fff 50%);
  position: relative;
  overflow: hidden;
  .btnBox {
    padding: 48rpx;
    position: relative;
    .btn {
      width: 100%;
      margin-bottom: 40rpx;
      border-radius: 45rpx;
      -webkit-box-reflect: below 0
        linear-gradient(transparent, rgba(255, 255, 255, 0.2));
    }
    .xBox {
      width: calc(100% - 64rpx);
      padding: 45rpx 32rpx;
      margin-bottom: 90rpx;
      background: linear-gradient(270deg, #fbf6ff 0%, #6b84ff 100%);
      box-shadow: 0rpx 7rpx 21rpx 1rpx rgba(137, 74, 172, 0.2);
      border: 3rpx solid #ffffff;
      border-radius: 35rpx 139rpx 35rpx 35rpx;
      position: relative;
      .cn {
        font-weight: bold;
        font-size: 54rpx;
        color: #ffffff;
        padding-bottom: 20rpx;
      }
      .en {
        font-weight: 400;
        font-size: 32rpx;
        color: #cdcbff;
        line-height: 1;
        padding: 18rpx 0;
      }
      .line {
        width: 135rpx;
        height: 1rpx;
        background: #cdcbff;
        border-radius: 21rpx 21rpx 21rpx 21rpx;
      }
      .img {
        width: 460rpx;
        position: absolute;
        top: -70rpx;
        right: -70rpx;
      }
    }
    .qBox {
      width: calc(100% - 64rpx);
      padding: 45rpx 32rpx;
      margin-bottom: 120rpx;
      background: linear-gradient(90deg, #f6f9ff 0%, #51a2ff 100%);
      background-size: 100% 100%;
      box-shadow: 0rpx 7rpx 21rpx 1rpx rgba(48, 101, 183, 0.2);
      border: 3rpx solid #ffffff;
      border-radius: 139rpx 35rpx 35rpx 35rpx;
      position: relative;
      display: flex;
      align-items: end;
      flex-direction: column;
      .cn {
        font-weight: bold;
        font-size: 54rpx;
        color: #ffffff;
        padding-bottom: 20rpx;
      }
      .en {
        font-weight: 400;
        font-size: 32rpx;
        color: #badaff;
        line-height: 1;
        padding: 18rpx 0;
      }
      .line {
        width: 135rpx;
        height: 1rpx;
        background: #badaff;
        border-radius: 21rpx 21rpx 21rpx 21rpx;
      }
      .img {
        width: 390rpx;
        position: absolute;
        top: 0rpx;
        left: -40rpx;
      }
    }
    .aBox {
      padding: 30rpx 40rpx;
      margin-bottom: 40rpx;
      border-radius: 20rpx;
      box-shadow: 0rpx 7rpx 21rpx 10rpx rgba(48, 101, 183, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .l {
        .cn {
          font-weight: bold;
          font-size: 35rpx;
          color: #1d77ff;
        }
        .en {
          font-size: 21rpx;
          color: #becee9;
        }
      }
      .r {
        width: 100rpx;
        height: 100rpx;
        background: #1d77ff;
        border-radius: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .uni-icons.uniui-contact-filled {
          font-size: 80rpx !important;
        }
      }
    }
  }
}
</style>
